<template>
  <van-cell class="product" @click="$jumpToPath('order/detail', { orderId: item.order_id })">
    <!-- 使用 title 插槽来自定义标题 -->
    <template #extra>
      <div class="left">
        <img :src="item.goods_image" alt="">
      </div>
      <div class="right">
        <div class="title"> {{ item.goods_name }}</div>
        <van-cell class="num_price" :value="'￥' + item.total_pay_price" :title="'x' + item.total_num" title-class="num" value-class="product_price"></van-cell>
      </div>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'OrderItem',
  props: {
    item: {
      require: true,
      default: () => {
        return {}
      },
      type: Object
    }
  }
}
</script>

<style lang="less" scoped>
.product {
  padding: 4.0666vw;
  height: 35vw;

  .left {
    float: left;
    margin-right: 20px;
    height: 120px;
    width: 33%;

    img {
      width: 100%;
    }
  }

  .right {
    width: 77%;
    line-height: 1.3;

    .title {
      font-size: 14px;
    }

    .num_price {
      padding: 2.13333vw 0px;
      font-size: 13px;

      .product_price {
        color: #fa2209;
      }
    }
  }
}
</style>
